<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta http-equiv="pragma" content="no-cache"> 
	    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	    <meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			background-color: #F3F3F3;
		}
		.mui-content {
			width: 100%;
			height: 100%;
			background-color: #F3F3F3;
		    -webkit-overflow-scrolling: touch;
		}
		.mui-search {
			margin-top: 28px;
			padding: 0px 10px;
		}
		.mui-search input[type=search] {
			border-radius: 15px;
			background-color: #FFFFFF;
			border:1px solid #4B0505
		}
		.mui-search .mui-placeholder {
			left: 20px;
			color: #ffe360;
			text-align: left;
		}
		.category-view{
		    width: 100%;
		    display: inline-table; 
		}
		.category-info{
		    text-align: center; 
		    display: table-cell; 
		    vertical-align: middle;
		    width: 25%;
		}
		.category-image{
		    width: 40px;
		    height: 40px;
		}
		.category-text{
		    font-size: 17px;
		    color: #353535;
		}
		.hot-image-div {
			margin-top: 15px;
			margin-left: 13px;
			margin-right: 13px;
		    position: relative;
		}
		.hot-image {
		    width: 100%;
		    height: 250px;
		}
		.hot-title-div {
			position: absolute;
			top: 10px;
			left: 10px;
		}
		.hot-title-icon {
			width: 15px;
			height: 15px;
		}
		.hot-title {
			font-size: 13px;
			color: #FFFFFF;
		}
		.shadow-view {
		    position: absolute;
		    left: 0px;
		    bottom: 5px;
		    width: 100%;
		    padding-top: 10px;
		    border-bottom-left-radius: 10px;
		    border-bottom-right-radius: 10px;
		    background-color: rgba(168, 54, 30, 0.6);
		}
		.goods-name-text {
		    margin-left: 23px;
		    color: #FFFFFF;
		    font-size: 25px;
		}
		.goods-des-text {
		    margin-left: 23px;
		    color: #FFFFFF;
		    font-size: 13px;
		    overflow:hidden; 
		    text-overflow:ellipsis;
		    display:-webkit-box; 
		    -webkit-box-orient:vertical;
		    -webkit-line-clamp:2; 
		}
		.hot-bottom-view {
		   margin-top: 5px;
		   margin-bottom: 10px;
		   position: relative;
		}
		.price-text {
		    color: #FFFFFF;
		    font-size: 16px;
		}
		.hot-text {
			position: absolute;
			right: 20px;
			bottom: 0px;
			color: #FFFFFF;
		    font-size: 16px;
		}
		 .special-view {
		    width: 100%;
		    margin-top: 35px;
		}
		.special-title-div {
			margin-left: 22px;
		}
		.special-view-text {
			color: #353535;
		    font-size: 15px;
		    margin-top: 10px;
		    padding-left: 5px; 
		}
	</style>
	<body>
		<div class="mui-content">
			<div class="mui-search">
				<input id="searchName" type="search" placeholder="请输入内容">
			</div>
			<div class="category-view">
				<!--<div class="category-info">
                    <img src="../img/index/jingpin_icon.png" class="category-image"></img>
                    <div><label class="category-text">精品推荐</label></div>
                </div>
                <div class="category-info">
                    <img src="../img/index/chihuo_icon.png" class="category-image"></img>
                    <div><label class="category-text">吃货专区</label></div>
                </div>
                <div class="category-info">
                    <img src="../img/index/shuiguo_icon.png" class="category-image"></img>
                    <div><label class="category-text">水果达人</label></div>
                </div>
                <div class="category-info">
                    <img src="../img/index/riyong_icon.png" class="category-image"></img>
                    <div><label class="category-text">日用商品</label></div>
                </div>-->
			</div>
			<div class="hot-image-div">
				<img class="hot-image"/>
				<div class="hot-title-div">
					<img src="../img/index/chihuo_icon.png" class="hot-title-icon" />
					<span class="hot-title">每日推荐</span>
				</div>
				<div class="shadow-view">
                    <span class="goods-name-text"></span>
                    <span class="goods-des-text"></text>
                    <div class="hot-bottom-view">
                        <span class="price-text"></text>
                        <span class="hot-text"></text>
                    </div>
                </div>
			</div>
			<div class='special-view'>
				<div class="special-title-div">
					<img src="../img/index/chihuo_icon.png" class="hot-title-icon" />
					<span class='special-view-text'>我的专场</text>
				</div>
	            <ul id="specialul" class="mui-table-view mui-grid-view">
			        <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
		                <div class="mui-media-object">
		                		<img class="special-image" src="../img/index/tuijian_bg.png" />
		                		<div class="special-info-div">
		                			<div class="special-text">夹心蒸蛋糕</div>
		                			<div class="special-collect-div">
		                				<img class="collect-icon" src="../img/index/chihuo_icon.png" />
		                				<span class="collect-span">333人</span>
		                			</div>
		                		</div>
		                		<div class="special-info-div">
		                			<div class="special-price">25.80¥</div>
		                			<div class="add-shopping-car-div"></div>
		                		</div>
		                	</div>
			        </li>-->
			    </ul> 
	        </div> 
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var saved = base.getSavedData();
		var userID = base.getParameter("userID");
		$(function () {
			var url = base.url.getHomePageData;
			var data = {
				userID: userID
			};
			base.postData(url,data,getHomePageDataSuccess);
		})
		function getHomePageDataSuccess(data) {
			if (data.success) {
				var goodsTypeList = data.context.goodsTypeList;
				var mySpecialList = data.context.mySpecialList;
				var everydayRecommend = data.context.everydayRecommend;
				saved.context = data.context;
				setGoodsTypeList(goodsTypeList);//设置banner图片
				$(".hot-image").attr("src", everydayRecommend.goodsImg)
				if (data.context.everydayRecommend.type == 2) {
					$(".shadow-view").hide();
				} else {
					$(".goods-name-text").text(everydayRecommend.goodsName);
					$(".goods-des-text").text(everydayRecommend.describe);
					$(".price-text").text("价格："+everydayRecommend.price/100);
					$(".hot-text").text("人气："+everydayRecommend.popularity);
				}
				var html = '';
				for(var index in mySpecialList) {
					html += getSpecialListItem(mySpecialList[index], index);
				}
				$("#specialul").html(html);
			} else {
				mui.toast(data.msg);
			}
		}
		function getSpecialListItem(item, index) {
			var html = '';
			html += '<li class="mui-table-view-cell mui-media mui-col-xs-6" data-index="' + index + '">'
			html += '	<div class="mui-media-object">'
			html += '		<img class="special-image" src="'+item.goodsImg+'" />'
			html += '		<div class="special-info-div">'
			html += '			<div class="special-text">'+item.goodsName+'</div>'
			html += '			<div class="special-collect-div">'
			html += '				<img class="collect-icon" src="../img/common/hot_icon.png" />'
			html += '				<span class="collect-span">'+item.popularity+'人</span>'
			html += '			</div>'
			html += '		</div>'
			html += '		<div class="special-info-div">'
			html += '			<div class="special-price">'+(item.price/100)+'¥</div>'
			html += '			<div class="add-shopping-car-div"></div>'
			html += '		</div>'
			html += '	</div>'
			html += '</li>'
			return html;
		}
		function setGoodsTypeList(bannerList) {
			var html = '';
			for (var index in bannerList) {
				html += getGoodsTypeListItem(bannerList[index], index);
			}
			$(".swiper-wrapper").html(html);
		}
		function getGoodsTypeListItem(item,index) {
			var html = '';
			html += '<div class="category-info" data-index="'+index+'">'
			html += '	<img src="../img/index/jingpin_icon.png" class="category-image"></img>'
			html += '	<div><label class="category-text">精品推荐</label></div>'
			html += '</div>'
			return html;
		}
		$("#specialul").on("tap", ".mui-table-view-cell", function() {
			var index = $(this).data('index');
			window.location.href = "goodsDetail.html?userID="+userID+'&goodsID='+saved.context.mySpecialList[index].goodsID;
		})
		$(".category-view").on("tap", ".category-info", function() {
			var index = $(this).data('index');
			//1：普通分类，2：精品推荐，3：自定义连接
			if (saved.context.goodsTypeList[index].type == 1) {
				
			} else if (saved.context.goodsTypeList[index].type == 2) {
				
			} else {
				
			}
		})
		$(".hot-image-div").click(function(){
			if (saved.context.everydayRecommend.type == 2) {
				parent.window.location = saved.context.everydayRecommend.url;
			} else {
				//商品分类
			}
		});
	</script>
</html>
